﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>demo</title>
    <!-- CSS Reset -->
    <link rel="stylesheet" href="/js/reset.css">

    <!-- Styling for your grid blocks -->
    <link rel="stylesheet" href="/js/style.css">
    <style>
        li img {
            max-width:200px;
            width:190px;
            width:expression(document.body.clientWidth>190?"190px":"auto");
            overflow:hidden;
        }
    </style>
</head>
<body >
{% if user.is_authenticated %}
    欢迎您:{{user}}
    <a href="/setting/">设置</a>
    <a href="/logout/">注销</a>
{% else %}
    <a href="/login/">登录</a>
    <a href="/signup/">注册</a>
{% endif %}
<a href="/articleAdd/">发表文章</a>
<a href="/uploadIndex/">图片上传</a>
<a href="/checkdm/">我的私信</a>
<br/>
我的关注列表
<div>
    {% for follow in i_follows %}
        {{follow.user.username }} </a>  <a href="/unfollow/{{follow.user.id}}">取消关注</a><br>
    {% endfor %}
</div>
推荐关注
{% for usr in users %}
    {{usr.username }} </a><a href="/follow/{{usr.id}}/">关注</a>  <a href="/dm/{{ usr.username }}/">私信</a><br>
{% endfor %}
</div>

<div id="main" role="main">

    <ul id="tiles">
        <!-- These are our grid blocks -->
        {% if articles %}
            {% for article in articles %}
                <li> <p>{{article.title|striptags}}</p><p>{{article.content|safe }}</p></li>
            {% endfor %}
        {% endif %}
        <!-- End of grid blocks -->
    </ul>
<input type="hidden" name="no" value="10">
</div>

</body>
<script src="/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/js/jquery.wookmark.js" type="text/javascript"></script>
<script type="text/javascript">
    var handler = null;

    // Prepare layout options.
    var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#main'), // Optional, used for some extra CSS styling
        offset: 2, // Optional, the distance between grid items
        itemWidth: 210 // Optional, the width of a grid item
    };

    /**
     * When scrolled all the way to the bottom, add more tiles.
     */
    function onScroll(event) {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
        if(closeToBottom) {
            // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
            var items = $('#tiles li');
            if(items.length<500){
                $.ajax({
                    type: "get",
                    url: "/article/ajax/",
                    data:{ no: items.length},
                    dataType: "html",
                    success: function (data) {
                        $('#tiles').append(data);
                        // Clear our previous layout handler.
                        if(handler) handler.wookmarkClear();

                        // Create a new layout handler.
                        handler = $('#tiles li');
                        handler.wookmark(options);
                    }
                });
            }
        }
    };

    $(document).ready(new function() {
        // Capture scroll event.
        $(document).bind('scroll', onScroll);

        // Call the layout function.
        handler = $('#tiles li');
        handler.wookmark(options);
    });
</script>

</html>